<template>
  <div class="task_box" ref="task_box">
    <div class="tab_box">
      <div class="title">零件信息</div>
      <div class="icons">
        <span class="el-icon-full-screen"></span>
      </div>
    </div>

    <div ref="piediv">
      <el-table
        @row-click="rowClick"
        :row-class-name="tableRowClassName"
        :data="tableData"
        style="width: 100%"
        :height="setHeight"
        :header-cell-class-name="headerRowStyle"
      >
        <el-table-column prop="id" label="" width="60"> </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="stage" label="阶段"> </el-table-column>
        <el-table-column prop="temp1" label="1#温度" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="temp2" label="2#温度" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="out1" label="输出1" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="out2" label="输出2" v-if="!isCasting">
        </el-table-column>
        <el-table-column prop="temp1" label="加热温度" v-if="isCasting">
        </el-table-column>
        <el-table-column prop="out2" label="保温时间" v-if="isCasting">
        </el-table-column>
      </el-table>
    </div>
    <div class="check_list">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          :label="item.label"
          v-for="item in checkBoxlist"
          :key="item.label"
        >
          {{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
      <div style="display: flex">
        <div>
          <div class="dis_center">
            <el-date-picker
              v-model="time1"
              size="small"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <span style="margin: 0 6px">-</span>
            <el-date-picker
              size="small"
              v-model="time2"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="btns">
          <el-button
            style="margin-right: 10px"
            size="small"
            type="primary"
            @click="submit"
            >确定</el-button
          >
          <el-button size="small" type="text">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { arr } from "../local";
import { TENANT_TITLE } from "@/utils/local";
export default {
  data() {
    return {
      time1: "",
      time2: "",
      checkList: ["PV1", "PV2", "Out1", "Out2"],
      checkBoxlist: [
        {
          label: "PV1",
        },
        {
          label: "PV2",
        },
        {
          label: "Out1",
        },
        {
          label: "Out2",
        },
      ],
      setHeight: 0,
      tableData: arr,
    };
  },
  computed: {
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.setHeight = this.$refs.task_box.getBoundingClientRect().height - 120;
    });
  },
  methods: {
    submit() {
      this.$emit("submitTaskLeft", this.checkList);
    },
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.task_box {
  .dis_center {
    display: flex;
    align-items: center;
    /deep/ .el-date-editor.el-input,
    /deep/ .el-date-editor.el-input__inner {
      width: 100%;
    }
    /deep/ .el-popper[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: #081f63;
    }
    /deep/ .el-select-dropdown__item.hover,
    /deep/ .el-select-dropdown__item:hover {
      background-color: #0da9f2;
    }
    /deep/ .el-select-dropdown {
      background-color: #081f63;
      /* color: #fff !important; */
      border: 1px solid #0da9f2;
      span {
        color: #fff;
      }
    }
    /deep/ .el-input__inner {
      background: rgba(1, 11, 71, 0.74);
      border: 1px solid #0da9f2;
    }
    justify-content: space-between;
    /deep/ .el-date-editor {
      width: auto !important;
    }
  }
  width: 40%;
  height: 100%;
  border: 1px solid #0da9f2;
  background-color: #0c2d72;

  /* overflow: auto; */

  /deep/ .gutter {
    display: none;
  }
  /deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }
  /deep/
    .el-table--scrollable-y
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }
  /deep/ .el-table {
    background-color: #093085 !important;
    /* border: 1px solid #0da9f2; */
    .has-gutter {
      th {
        padding: 6px 0;
      }
    }
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #093085 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
  .check_list {
    /* display: flex; */

    padding: 10px;
    padding-bottom: 0;
    .btns {
      margin-left: 10px;
      display: flex;
      /* flex-direction: column; */
      flex-wrap: nowrap;
      /deep/ .el-button {
        margin: 0;
      }
    }
    /deep/ .el-checkbox {
      width: 50px;
      margin-bottom: 6px;
    }
    /deep/ .el-checkbox__label {
      color: #fff;
    }
  }
  .tab_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #010b47;
    /* height: 52px; */
    padding: 10px;
    /* margin-bottom: 10px; */
    /* border-bottom: 1px solid #0c2d72; */
    .icons {
      display: flex;
      align-items: center;
      .line {
        background-color: #143e94;
        height: 16px;
        width: 1px;
        margin: 0 10px;
      }
    }
    .title {
      font-size: 16px;
    }
  }
}
</style>